<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    <title>Document</title>
</head>
<body>
    <div id="app">
        {{msg}}
    </div>
    <script>
        const vm = new Vue({
            el:"#app",
            // data的书写要写成一个函数，函数返回一个数据对象
            data(){
                return {
                    msg:"hello",
                };
            },
        });


        // 1..data为什么写成函数（data写成对象的缺点如下：）
        // 1.声明data（模拟这个是某个组件的打他）
        const data1 = {
            name:"yang",
            age:18,
        };

        // 当组件复用的时候，很多地方都要对data操作
        const data1_one = data1;
        const data1_two = data1;

        // 在组件1中修改了data1
        // 因为data1_one data1_two data1 地址都是一样的，只要修改一个，则其他的全部都会发生变化
        // 所以我们不会把组件中的data写成对象，否则组件之间的data会互相影响
        data1_one.age = 20;



        //2..data为什么写成函数（data写成函数如下：） 
        function data2(){
            const w = {
                name:"zheng",
                age:22
            };
            return w
        }

        // 当组件被复用的时候，需要拿到data2中的数据，则需要调用data2函数
        // 每当data2函数的调用，都会创建一个新的对象，所以组件之间的data是不会互相影响的
        const data2_one = data2();
        const data2_two = data2();
    </script>
</body>
</html>